<template>
  <div class="bill">
    <ComNavBar :title="t('Transaction History')" />

    <div class="container">
      <van-list
        :loading="loading"
        :finished="finished"
        :immediate-check="false"
        offset="50"
        :loading-text="t('loading......')"
        @load="onLoad"
      >
        <div class="card" v-for="item in recordList" :key="item.id">
          <div class="card-item">
            <div class="card-item-content">
              <div class="card-item-name">{{t('Type')}}: <span> {{ TYPE_TXT[item.type] || 'Service Fee' }}</span></div>
              <div class="card-item-date">{{t('Time')}}: {{ date(item.create_datetime) }}</div>
            </div>
            <div class="card-item-value">{{ item.amount < 0 ? '-' : '' }}₹{{ decimalpre(Math.abs(item.amount)) }}</div>
            </div>
          </div>
      </van-list>

      <NoRecord :showTxt="!!(recordList.length && finished)" :showImg="!recordList.length && !loading" />
    </div>
  </div>
</template>
<script setup>
import { ref, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { decimalpre, date } from '@/utils/util'
import { get } from '@/utils/request'
import { t } from '@/languages'
const $router = useRouter()


// 0 Block 大宗交易 1 Quantitative 量化交易也就是万人建仓 2 Buy Stocks 买股票 3 Sell Stocks 买股票 4 Top Up 充值 5 Withdraw 提现 其他均为手续费，统一展示为Service Fee
const TYPE_TXT = {
  0: 'Block',
  1: 'Quantitative',
  2: 'Buy Stocks',
  3: 'Sell Stocks',
  4: 'Top Up',
  5: 'Withdraw',
}

const recordList = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
async function queryList(isMore = false) {
  if (!isMore) {
    page.value = 1
    finished.value = false
    recordList.value = []
  }

  loading.value = true

  try {
    const res = await get(`/api/app/feehitory/`, {
      page: page.value,
      limit: 10
    })

    console.log(res)

    recordList.value = [...recordList.value, ...res.data]

    if (recordList.value.length >= res.count) {
      finished.value = true
    }

  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}

function onLoad() {
  if (loading.value || finished.value) return

  page.value++

  queryList(true)
}


onBeforeMount(queryList)

</script>
<style lang="scss" scoped>
.container {
  padding: .26667rem;
}

.bill .container .card {
  background: #0e1822;
  border: .02667rem solid #0f3a40;
  border-radius: .10667rem;
  margin-bottom: .26667rem;
  padding: .26667rem;
}

.bill .container .card .card-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bill .container .card .card-item .card-item-content {
  margin-bottom: .26667rem;
}

.bill .container .card .card-item .card-item-content .card-item-name {
  font-weight: 600;
  font-size: .4rem;
  width: 4.26667rem;
  text-align: left;
  padding-right: .53333rem;
}

.bill .container .card .card-item .card-item-date {
  margin-top: .08rem;
  color: #9597a3;
}

.bill .container .card .card-item .card-item-content .card-item-name span {
  color: #5ef3c8;
}

.bill .container .card .card-item-value {
  color: #62f792;
  font-weight: 600;
  font-size: .42667rem;
}
</style>
